@charset "utf-8";
@mixin size($wh, $ht) {
    width: $wh;
    height: $ht;
}

body,
html {
//  min-width: 1920px;
    background: #f5f5f5;
}

#web {
    width: 100%;
    height: 100%;
    .top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #f0eeef;
        .top_login {
            width: 1330px;
            height: 40px;
            margin: 0 auto;
            .t_lef {
                a {
                    color: #707070;
                    font-size: 14px;
                    padding-left: 16px;
                    padding-right: 16px;                   
                }
                a:hover{
                    color: red;
                }
                
            }
            .t_rig {
                a {
                    color: #707070;
                    padding-left: 35px;
                    padding-right: 35px;
                    font-size: 14px;
                    b {
                        color: red;
                    }
                }
                a:hover{
                    color: red;
                }
            }
        }
    }
    .search {
        width: 1330px;
        height: 170px;
        margin: 0 auto;
        .logo {
            width: 86px;
            padding: 26px 0 0 16px;
        }
        .search_inp {
            width: 847px;
            height: 44px;
            border: 1px solid #252b38;
            border-radius: 12px;
            position: relative;
            margin-top: -76px;
            margin-right: 203px;
            background: white;
            .for {
                height: 42px;
                .inp_1 {
                    width: 770px;
                    height: 43px;
                    border: none;
                    position: absolute;
                    top: 0px;
                    left: 10px;
                }
                .inp_2 {
                    width: 69px;
                    height: 45px;
                    position: absolute;
                    right: -1px;
                    top: -1px;
                }
            }
            span {
                display: inline-block;
                margin-top: 12px;
                color: #707070;
                a {
                    padding-left: 6px;
                    padding-right: 6px;
                    color: #707070;
                }
                a:hover{
                    color: skyblue;
                }
            }
        }
    }
    nav {
        width: 100%;
        height: 44px;
        background: #252b38;
        ul {
            width: 1330px;
            margin: 0 auto;
            
            li {
                width: 90px;
                height: 44px;
                float: left;
                text-align: center;
                padding-left: 18px;
                padding-right: 22px;
                position: relative;
                overflow: hidden;
                span{
                    position: absolute;
                    left: 0;
                    width: 90px;
                }
                a {
                    font-size: 16px;
                    line-height: 44px;
                    color: white;
                    display: block;
                    position: relative;
                    width: 90px;
                    height: 44px;
                }
            }
        }
    }
    .di_bu {
        width: 100%;
        height: 358px;
        background: white;
        border-top: 2px solid #cccccc;
        .di_bu_main {
            width: 1330px;
            height: 357px;
            margin: 0 auto;
            .ul {
                width: 1330px;
                height: 135px;
                border-bottom: 1px solid #cccccc;
                li {
                    float: left;
                    margin-top: 42px;
                    img {
                        vertical-align: middle;
                        display: inline-block;
                    }
                    img:last-child {
                        margin-right: 64px;
                    }
                    .di_bu_a {
                        width: 139px;
                        margin-left: 16px;
                        padding-right: 63px;
                        span {
                            a {
                                font-size: 18px;
                                color: #313131;
                            }
                        }
                        span:last-child {
                            a {
                                font-size: 16px;
                                color: #707070;
                            }
                            a:hover{
                                color: #ffb787;
                            }
                        }
                    }
                }
                li:first-child {
                    padding-left: 63px;
                }
            }
            .di_bu_nav {
                width: 1210px;
                height: 220px;
                //          background: skyblue;
                margin: 0 auto;
                li {
                    float: left;
                    padding-right: 197px;
                    margin-top: 28px;
                    a {
                        color: #535353;
                        font-weight: bold;
                    }
                    span {
                        a {
                            font-size: 12px;
                            color: #878787;
                        }
                        a:hover{
                            color: #ffb787;
                        }
                    }
                }
                li:nth-last-child(2) {
                    padding-right: 160px;
                }
                li:last-child {
                    padding-right: 0px;
                    font-size: 14px;
                    color: #878787;
                    img {
                        padding-top: 17px;
                        padding-left: 5px;
                    }
                }
            }
        }
    }
    footer {
        width: 100%;
        height: 50px;
        background: #252b38;
        .foot {
            width: 1330px;
            margin: 0 auto;
            font-size: 12px;
            line-height: 50px;
            color: white;
            span {
                padding-left: 16px;
                padding-right: 16px;
            }
            a {
                padding-left: 18px;
                padding-right: 18px;
                color: white;
            }
        }
    }
}

.hakusivu {
    @include size (1920px, 1539px);
    //导航部分
    .hakusivu_a {
        @include size (1115px, auto);
        margin-left: 302px;
        table td {
            padding-right: 70px;
            padding-top: 16px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-bottom: 1px;
            a {
                color: black;
            }
            a:hover {
                border-bottom: 1px solid;
                
            }
        }
    }
    //产品价格表
    .ha_nav {
        @include size (1110px, 36px);
        background: #d8d8d8;
        margin-left: 302px;
        margin-top: 15px;
        .ha_n {
            padding-top: 7px;
            padding-left: 24px;
            font-size: 12px;
        }
    }
    //图片部分
    .ha_i {
        @include size (1118px, auto);
        //      background:red;
        margin-left: 302px;
        
        
        .ha_i1 {
            @include size (268px, 386px);
            background: #e4e4e4;
            font-size: 12px;
            float: left;
            margin-right: 12px;
            margin-top: 18px; 
            transition: 900ms;
            p {
                margin-bottom: 5px;
                margin-left: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            a {
                color: black;
            }
            a:hover {
                border-bottom: 1px solid;
            }
            div a:hover{
                border-bottom: 0;
            }
            .ha_ph {
                @include size (100%, 270px);
                margin-bottom: 15px;
                overflow: hidden;
                position: relative;
//              padding-top: 10px;
                img {
                    width: 100%;
                    transition: 300ms; 
                }
               .ha_tx{
                   width: 268px;
                   height: 100px;
                   background: #e4e4e4;
                   text-align: center;
                   font-size: 24px;
                   line-height: 40px;
                   opacity: 1;
                   color: red;
                   position: absolute;
                   top: 100%;
                   transition: all 3s inherit ease-in-out;
                   transition: 200ms;
                   transition:1s;
               } 
            }
        }
    }
}

table tr td:nth-child(1) {
    color: #b1b1b1;
    font-size: 14px;
}

.ha_i .ha_i1:nth-child(4n) {
    margin-right: 0;
}
.ha_i1:hover{
    transform:translatey(-10px);
    transition-duration:.5s;
    transition-timing-function:ease;
    box-shadow:0px 10px 30px gray;
    .ha_ph:hover{
            .ha_tx{
            opacity: 0.7;
            top: 70%;
        }
    }
}
nav .over{
    color: black;
    background: white;
    top: -48px;
}
nav .out{
    color: #999999;
}
